<template>
<div class="company-help">
  
      <section class="introduction">
          <div class="title">
        <p>作业布置表单</p>
      </div>
  <el-form ref="form" :model="publicHomework" label-width="150px" style="width: 600px">
    <el-form-item label="作业名称">
      <el-input v-model="publicHomework.name"></el-input>
    </el-form-item>
    <el-form-item label="作业介绍" >
      <el-input type="textarea" v-model="publicHomework.intro"></el-input>
    </el-form-item>
    <el-form-item label="习题文件夹添加" >
      <el-col :span="13">
        <el-select v-model="folderCurr"  >
          <el-option
            v-for="item in folderOption"
            :key="item.id"
            :label="item.label"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button size="mini" icon="el-icon-plus" @click="addfolder" circle></el-button>
      </el-col>
      <el-col :span="3">
        <el-button size="mini" icon="el-icon-delete" type="danger" @click="clearfolder" circle></el-button>
      </el-col>
      <el-col :span="3">
        {{this.folderNum}}
      </el-col>
    </el-form-item>
    <!-- <el-form-item label="课程添加" >
      <el-col :span="13">
        <el-select v-model="courseCurr"  >
          <el-option
            v-for="item in courseOption"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button size="mini" icon="el-icon-plus" @click="addcourse" circle></el-button>
      </el-col>
      <el-col :span="3">
        <el-button size="mini" icon="el-icon-delete" type="danger" @click="clearcourse" circle></el-button>
      </el-col>
      <el-col :span="3">
        {{this.courseNum}}
      </el-col>
    </el-form-item> -->

    <el-form-item label="班级添加" >
      <el-col :span="13">
        <el-select v-model="classCurr"  >
          <el-option
            v-for="item in classOption"
            :key="item.id"
            :label="item.major+item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button size="mini" icon="el-icon-plus" @click="addclass" circle></el-button>
      </el-col>
      <el-col :span="3">
        <el-button size="mini" icon="el-icon-delete" type="danger" @click="clearclass" circle></el-button>
      </el-col>
      <el-col :span="3">
        {{this.classNum}}
      </el-col>
    </el-form-item>
    <el-form-item label="发布时间">
      <div class="block">
        <el-date-picker
          v-model="value"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </el-form-item>
    <el-form-item label="准时发布">
      <el-switch
        v-model="value1"
        style="display: block"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addPublish">提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
      </section>
</div>
</template>

<script>
import publish from "api/publish";
import homework from "api/homework";
import courseApi from "api/course";
import classs from "api/classs";
export default {
  name: "newPublish",
  data(){
    return{
      value: '',
      value1:true,
      searchObj:{},
      total:0,
      publicHomework:{},
      folderList:[],
      classList:[],
      courseList:[],
      folderOption:[],
      folderCurr:'',
      folderNum:0,
      courseOption:[],
      courseCurr:'',
      courseNum:0,
      classOption:[],
      classCurr:'',
      classNum:0,
    }
  },
  created() {

      this.loginInfo = this.$store.state.userinfo
 
     this.init()
  },
  methods:{
    clearclass(){
      this.classList=[]
      this.classNum=0
    },
    addclass(){
      let flag=0
      if(this.classList){
        for(let i=0;i<this.classList.length;i++) {
          if (this.classList[i] == this.classCurr) {
            flag=1
            break
          }
        }
      }
      if(flag==0&&this.classCurr){
        this.classList.push(this.classCurr)
        this.classNum++
      }
      flag=0
    },
    clearcourse(){

      this.courseList=[]
      this.courseNum=0
    },
    addcourse(){
      let flag=0
      if(this.courseList){
        for(let i=0;i<this.courseList.length;i++) {
          if (this.courseList[i] == this.courseCurr) {
            flag=1
            break
          }
        }
      }
      if(flag==0&&this.courseCurr){
        this.courseList.push(this.courseCurr)
        this.courseNum++
      }
      flag=0
    },
    clearfolder(){
      this.folderList=[]
      this.folderNum=0
    },
    addfolder(){
      let flag=0
      if(this.folderList){
        for(let i=0;i<this.folderList.length;i++) {
          if (this.folderList[i] == this.folderCurr) {
            flag=1
            break
          }
        }
      }
     if(flag==0&&this.folderCurr){
       this.folderList.push(this.folderCurr)
       this.folderNum++

     }
     flag=0
    },
    init(){
      homework.getfolderList(this.loginInfo.id).then(res=>{
        this.folderOption=res.data.data.folderList
      })
      courseApi.getCourseList(1,10,this.searchObj).then(response => {
        this.courseOption = response.data.data.items
        this.total=response.data.data.total
        this.page=response.data.data.page

      })
      classs.getClassList(this.loginInfo.id).then(res=>{
        this.classOption=res.data.data.classs

      })
    },
    addPublish(){
      this.publicHomework.gmtStart=this.value[0]
      this.publicHomework.gmtFinish=this.value[1]
      if(this.value1==true){
        this.publicHomework.status=1
      }else{
        this.publicHomework.status=0
      }
      this.publicHomework.teacherId=this.loginInfo.id
     publish.addPublish(this.folderList,this.classList,this.courseList,this.publicHomework).then(res=>{
       if(res.data.code==20000){
this.$message({
          type: 'success',
          message: "布置成功"
        })

       this.publicHomework={}
       this.folderList=[]
       this.courseList=[]
       this.classList=[]
       this.courseNum=0
       this.folderNum=0
       this.classNum=0
       this.value=''
   // this.$router.push({ path: '/class/compontents/publishList' })
       }
        
      })
    }
  }
}
</script>



<style lang="stylus" scoped>
  .company-help {
    background: #e4e5e6;
    .user-info {
      font-size: 14px;
      background: #fafafa;
      margin-bottom: 20px;
      .title {
        background: #f0f1f3;
        height: 36px;
        line-height: 36px;
        p {
          display inline-block;
          height: 16px;
          line-height 16px;
          margin: 0 6px 0px 12px;
          padding-left: 6px;
          border-left: solid 4px #057ab8;
          vertical-align middle;
        }
      }
      .info {
        padding: 10px 0 10px 30px;
        .logo {
          display inline-block;
          width: 60px;
          height: 60px;
          margin-top: 8px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info-right {
          display: inline-block;
          padding-top: 8px;
          min-height: 76px;
          line-height: 22px;
          margin-left: 12px;
          vertical-align: top;
          .account {
            font-weight: bold;
          }
        }
      }
    }
    .introduction {
      font-size: 14px;
      background: #fafafa;
      margin-bottom: 38px;
      .title {
        background: #f0f1f3;
        height: 36px;
        line-height: 36px;
        p {
          display inline-block;
          height: 16px;
          line-height 16px;
          margin: 0 6px 0px 12px;
          padding-left: 6px;
          border-left: solid 4px #057ab8;
          vertical-align middle;
        }
      }
      .intro {
        padding: 10px 0 10px 30px;
        li {
          padding: 10px;
          .icon-search {
            display:inline-block;
            width: 52px;
            height: 52px;
            background-image: url('/views/comp/features.png');
            background-position: 0 0;
          }
          .intro-detail {
            display: inline-block;
            margin-left: 12px;
            line-height: 20px;
            font-size: 12px;
            vertical-align: top;
            .intro-title {
              color: #0079bd;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>


